<script setup>
import Register from '@/views/register/index.vue'
import { register } from '@/api/auth'
import { ElMessage } from 'element-plus';
import router from '@/router';
import { LOGIN } from '@/router/routeMap';
import { requestErrorHandler } from '@/errorHandler';
import { ref } from 'vue';
import CenterContainer from '@/components/CenterContainer.vue';

const isLoadingOfRegister = ref(false)
const onClickRegister = async ({ username, password }) => {
  try {
    if (isLoadingOfRegister.value) return
    isLoadingOfRegister.value = true
    const result = await register({ username, password })
    if (result.code === 0) {
      ElMessage.success(result.message)
      router.push(LOGIN)
    }
  } catch (err) {
    requestErrorHandler(err)
  } finally {
    isLoadingOfRegister.value = false
  }
}
</script>

<template>
  <CenterContainer :offsetLeft="-20" :offsetTop="-40">
    <Register @clickRegister="onClickRegister" :isLoadingOfRegister="isLoadingOfRegister" />
  </CenterContainer>
</template>